import React, { PureComponent, Fragment } from 'react';
import { Chart, Geom, Axis } from 'bizcharts';
import { connect } from 'dva';

@connect(({ simcardDetail, loading }) => ({
  simcardDetail,
  loading: loading.models.simcard,
}))
export default class SimCardDetail extends PureComponent {
  componentDidMount() {
    const { dispatch, match } = this.props;
    dispatch({
      type: 'simcardDetail/fetchSimCardDetail',
      payload: {
        iccid: match.params.simcardId,
      },
    });
  }

  render() {
    return (
      <Chart height={400} data={this.props.simcardDetail.data} forceFit>
        <span>今日各小时流量使用情况（单位：MB）</span>
        <Axis name="date" />
        <Axis name="usage" />
        <Geom type="interval" position="date*usage" />
      </Chart>
    );
  }
}
